<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ac {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        // $mount("#app") 将vue实例挂载到dom
        // render函数 可以渲染dom元素和组件到页面中

        var Home = {
            template: `<div><h1>被渲染的组件</h1></div>`,
            data() {
                return {}
            }
        }

        new Vue({
            // el: "#app",
            template: ``,
            data() {
                return {
                    msg: "你好"
                }
            },
            render: (h) => {
                // h--用来创建元素或组件 
                //       元素        内容
                return h('h1', {
                    class: 'ac',
                    style: {
                        background: "green"
                    },
                    attr: {
                        id: "kk"
                    },
                    on: {
                        click() {
                            alert("你好")
                        }
                    }
                }, ['明天放假', h("span", "哈哈哈"), h(Home)])
            }
        }).$mount("#app");
    </script>
</body>

</html>